
<template>
  <button @click="color = 'red'">改变颜色为红色</button>
  <span> {{ msg }}</span>
  <button @click="color = 'green'">改变颜色为绿色</button>
  <Test></Test>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue' // 需要先去引入defineProps和defineEmit。这样引入是因为用了script setup标签，就相当于props和emit
import { ref } from 'vue'
import Test from './Test.vue'
let props = defineProps({
  test: {
    type: String,
    default: 'test111',
  },
})
const msg = ref('setup')
const color = ref('red')
console.log(props.test)
</script>

<style scoped >
span {
  color: v-bind(color);
}
</style>